<template>
  <Echart v-if="data.length" :options="options"></Echart>
  <el-empty v-else description="暂无数据" />
</template>

<script setup>
import Echart from '@/components/Echart/index'
import { generateTimeArray } from '@/utils/index'
const { proxy } = getCurrentInstance()

const props = defineProps({
  data: {
    type: Object,
    default: () => ([])
  },
  dateType: { // 时间类型 1 日 2 月 3 年 4 总
    type: Number||String,
    default: 1
  },
  option: {
    type: Object,
    default: () => ({})
  },
  time: {
    type: Number,
    default: 60
  }
})

const options = ref({
  dataset: {
    source: props.data // 直接使用原始数据
  },
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    right: "15",
    bottom: "0",
    top: "30",
    left: "10",
    containLabel: true
  },
  xAxis: {},
  yAxis: {
    name: 'kWh',
    nameTextStyle: {
      align: 'right',
    },
    type: 'value',
    splitLine: {
      lineStyle: {
        type: 'dashed', //虚线
      },
      show: true //隐藏
    },
  },
  series: []
})

watch(() => props.data, (val) => {
  options.value.dataset.source = val
  let xAxis = {
    type: 'category',
    axisTick: {
      show: false,
    },
    axisLabel: {
      align: 'center',  // 关键设置：标签居中
    },
  }
  if (props.dateType == 1) {
    /* x轴数据要和接口返回数据对应
			比如接口返回的是每五分钟一条数据,generateTimeArray就要获取的是每过五分钟的一个时间点
			现在接口返回的是一个小时的一条数据,generateTimeArray就要获取的是每过60分钟的一个时间点
			如果数据长度对应不上,比如接口返回的数据是以小时为间隔的时间点,x轴数据还是每过五分钟的时间点,x轴就会有很多数据点,导致对应数据的tooltip很难点击显示
		*/
    xAxis.data = generateTimeArray(props.time)
    xAxis.axisLabel.interval = (index, value) => {
      let arr = [3, 6, 9, 12, 15, 18, 21]
      if (arr.includes(parseInt(value.split(':')[0])) && value.endsWith(':00')) {
        return value;
      }
      return false;
    }
  } else if (props.dateType == 2 || props.dateType == 3) {
    xAxis.axisLabel.formatter = (value) => {
      return proxy.parseTime(value, props.dateType==2?'{y}-{m}-{d}':'{y}-{m}')
    }
  }
  
  let series = [{
    type: 'line',
    name: '电量(kWh)',
    itemStyle: { // 折现颜色
      color: '#679aff'
    },
    smooth: true,
    barWidth: "12", // 折现宽度
    symbolSize: 6, // 小圆点大小
    symbol: 'circle',
    areaStyle: { // 区域渐变颜色
      opacity: 0.3,
    },
    encode: {
      x: 'name',
      y: 'value'
    },
  },{
    type: 'bar',
    name: '电量(kWh)',
    tooltip:{
      show:false
    },
    barWidth: "8",
    itemStyle: {
      color: '#679aff',
      borderRadius: [20, 20, 0, 0],
    },
    encode: {
      x: 'name',
      y: 'value'
    },
  }]
  // if (props.dateType != 1) { // 月/年/总 图表添加柱状图
  //   series.push({
  //     type: 'bar',
  //     tooltip:{
  //       show:false
  //     },
  //     barWidth: "8",
  //     itemStyle: {
  //       color: '#679aff',
  //       borderRadius: [20, 20, 0, 0],
  //     },
  //     encode: {
  //       x: 'name',
  //       y: 'value'
  //     },
  //   })
  // }
  options.value.xAxis = xAxis
  options.value.series = series
}, {
  deep: true,
  immediate: true
})
watch(() => props.option, (val) => {
  options.value = {...options.value,...val}
}, {
  deep: true,
  immediate: true
})
</script>

<style lang="less" scoped>
</style>